<script setup>
import emojiList from "@/assets/json/emoji.json";
import heoList from "@/assets/json/heo.json";

const type = ref(0);
const emit = defineEmits(["chooseEmoji"]);
const chooseEmoji = (url, type) => {
  let emoji = {
    url: url,
    type: type
  }
  if (type === 1) {
    emoji.width = "50px";
    emoji.height = "100%"
  }
  if (type === 2) {
    emoji.maxHeight = "100px";
    emoji.height = "100%"
  }
  if (type === 0) {
    emoji.width = "25px"
    emoji.height = "25px"
  }
  emit("chooseEmoji", emoji);
};
</script>

<template>
  <div class='emoji-container'>
    <div class="emoji-box" v-if="type === 0">
      <div class="emoji-item" v-for="(item, index) of emojiList" :key="index"
           @click="chooseEmoji(item.url, 0)">
        <el-tooltip class="item" effect="dark" :content="item.name" placement="top">
          <img :src="item.url" class="emoji" :title="item.name" alt=""/>
        </el-tooltip>
      </div>
    </div>
    <div class="emoji-box" v-if="type === 1">
      <span class="emoji-item" v-for="(item, index) of heoList" :key="index"
            @click="chooseEmoji(item.url, 1)">
        <el-tooltip class="item" effect="dark" :content="item.name" placement="top">
          <img :src="item.url" class="heoImg" :title="item.name" alt=""/>
        </el-tooltip>
      </span>
    </div>
    <div class="btn-box">
      <el-radio-group v-model="type">
        <el-radio-button :label="0">表情</el-radio-button>
        <el-radio-button :label="1">heo</el-radio-button>
      </el-radio-group>
    </div>
  </div>
</template>

<style scoped lang="less">
.emoji-container {
  max-width: 600px;
  padding: 5px;
  border-radius: 5px;
  border: 1px solid var(--border-line);
  background-color: var(--background-color);

  .emoji-box {
    min-height: 150px;
    max-height: 150px;
    max-width: 600px;
    overflow-y: auto;

    &::-webkit-scrollbar {
      display: none;
    }

    .emoji-item {
      cursor: pointer;
      display: inline-block;

      .emoji {
        padding: 3px;
        width: 30px;
        height: 30px;
        border-radius: 5px;

        &:hover {
          background-color: rgb(221, 221, 221)
        }
      }

      .heoImg {
        width: 40px;
        height: 40px;
        margin-left: 5px;
        transition: all 0.35s;

        &:hover {
          transform: scale(1.2);
        }
      }
    }
  }

  .btn-box {
    margin-top: 10px;
    padding-top: 5px;
    color: var(--text-color);
    border-top: 2px solid var(--border-line);
  }
}
</style>